<script type="text/javascript">
$(function() {
	$( ".calendar").datepicker();
});
</script>
<%@ include file="/jsp/common/tagLibs.jsp"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/admin/surveyDetails.js"></script>
<DIV class=content_division>
	<DIV class=content_container>
	<DIV class=cleardiv></DIV>
		<DIV class=content_left_shadow>
			<DIV class=content_right_shadow>
				<DIV class=under_flash_shadow></DIV>
				<!-- CONTENT START -->
				<DIV class=content_inner_container>
						   <form:form id="columnarForm" commandName="surveyDetailsVO">				
							<DIV class=cleardiv></DIV>
							<DIV class=maincol style="width:100%;">
							<DIV class=button_orange>
								<DIV class=bo_left></DIV>
								<DIV class=bo_mid>Survey Details</DIV>
								<DIV class=bo_right></DIV>
							</DIV>
							<div class="bottom-border" style="margin-top:10px;">
								<table CELLSPACING="10">
									<tr>
										<td>Bank:</td>
										<td>
											<form:select id="selectedBankCode" path="selectedSurvey.bankcode" items="${surveyDetailsVO.bankDetailsList}" itemLabel="bankname" itemValue="bankcode"/>
										</td>										
										<td >																					
										</td><td colspan="4"></td>
									</tr>
									<tr>
										<td>Survey Name:</td>
										<td><form:input id="surveyName" path="selectedSurvey.surveyname" cssClass="input jFocus"/></td>
										<td>From:</td>
										<td>
										<input id="fromdt" type="text" 
										name="selectedSurvey.startdate" 
										class="input calendar jFocus" 
										value="<fmt:formatDate pattern="dd/MM/yyyy" value="${surveyDetailsVO.selectedSurvey.startdate}" />" />
										</td>
										<td>To:</td>
										<td>										
										<input id="todt" type="text" 
										name="selectedSurvey.enddate" 
										class="input calendar jFocus" 
										value="<fmt:formatDate pattern="dd/MM/yyyy" value="${surveyDetailsVO.selectedSurvey.enddate}" />" />
							   				<form:hidden id="surveyid" path="selectedSurvey.surveyid"/>	
							   				<form:hidden id="questionid" path="selectedQuestion.surveyquestionid"/>	
										</td>
									</tr>
								</table>
							</div>
							<div>
								<label for="survey">Survey question</label>
								<textarea id="quesDesc" name="selectedQuestion.questiondescription" cols="80" rows="7" class="input jFocus" style="height:150px;padding:5px;"><c:out value="${surveyDetailsVO.selectedQuestion.questiondescription}" /></textarea>
								<div style="margin-top:15px;">
								Topic
											<form:select id="selectedTopicID" path="selectedQuestion.topicid" items="${surveyDetailsVO.topicsList}" itemLabel="topicname" itemValue="topicid"/>							
								</div>	
								<div style="margin-top:15px;">
								Factor
											<form:select id="selectedFactorID" path="selectedQuestion.factorid" items="${surveyDetailsVO.factorsList}" itemLabel="factorname" itemValue="factorid"/>							
								</div>							
								<div>
								<label for="city1">
									<input type="hidden" name="validation" id="validation"/>
									<c:if test="${not empty surveyExist}">
									<span class="error" style="color: red">Survey Name already exist.</span>
									</c:if>
   									<c:if test="${surveyDetailsVO.selectedSurvey.completeindicator == 'Y'}">
									<span class="error" style="color: red">This Survey is complete.</span>
									</c:if>	
								</label>	
								</div>
								<div style="margin-top:15px;">
								 
									<input id="saveBtn" value="Save" type="submit" class="button" />
									<input id="addBtn" value="Add next question" type="submit" class="button" />
									<input id="completeBtn" value="Complete" type="submit" class="button" />
									<input id="cancelBtn" value="Cancel" type="submit" class="button" />
								</div>
							</div>
							<DIV class=cleardiv></DIV>
							<div style="margin-top:20px;">
								<c:if test="${ not empty surveyDetailsVO.surveyQuestions }">							
								<table class="table-css">
									<thead>
										<tr><th width="5%">S.No.</th><th width="85%">Questions</th><th width="5%"></th><th width="5%"></th></tr>
									</thead>
									<tbody>
									<c:forEach items="${surveyDetailsVO.surveyQuestions}" var="surveyQuestions" varStatus="status">						
										<tr style="height:50px;">
										<td>
							   			${status.count}									
										</td><td>${surveyQuestions.questiondescription}</td>
										<td><a href="${pageContext.request.contextPath}/surveydetails/edit.html?surveyId=${surveyDetailsVO.selectedSurvey.surveyid}&questionId=${surveyQuestions.surveyquestionid}" title="edit" class="edit nostyle">&nbsp;</a></td>
										<td><a href="${pageContext.request.contextPath}/surveydetails/deletequestion.html?surveyId=${surveyDetailsVO.selectedSurvey.surveyid}&questionId=${surveyQuestions.surveyquestionid}" title="delete" class="delete nostyle">&nbsp;</a></td></tr>
									</c:forEach>
									</tbody>
								</table>
								</c:if>
							</div>
							</div>
							<DIV class=cleardiv></DIV>
							</form:form>   
							<br/><br/><br/>
						</DIV>
				<!-- CONTENT END -->
			</DIV>
		</DIV>
		<DIV class=cleardiv></DIV>
	</DIV>
</DIV>